<template>
  <div v-loading="loading">
    <el-button
      v-if="moduleNameOptions&&activePageForm&&activePageForm.activeModuleIndex!=null&&(
        !moduleNameOptions[activePageForm.modules[activePageForm.activeModuleIndex].type].maxSize||
        activePageForm.modules[activePageForm.activeModuleIndex].modules.length<moduleNameOptions[activePageForm.modules[activePageForm.activeModuleIndex].type].maxSize)"
      type="primary"
      size="small"
      round
      @click="add"
    >新增内容
    </el-button>

    <!-- 未配置数据相关内容 -->
    <div
      v-if="activePageForm.modules[activePageForm.activeModuleIndex].modules.length === 0"
      class="empty-tips"
    >
      未配置数据
    </div>

    <!-- 站内链接 -->
    <template v-else>
      <ul class="shelf-list-container">
        <draggable
          :list="
            activePageForm.modules[activePageForm.activeModuleIndex].modules
          "
          :options="{ filter: '.undrag' }"
        >
          <li
            v-for="(item, index) in activePageForm.modules[activePageForm.activeModuleIndex].modules"
            :key="index"
            class="shelf-container"
          >
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span style="fontWeight: bold; line-height: 32px">{{ item.title }}</span>
                <div style="float: right">
                  <el-button size="mini" type="primary" round @click="edit(item, index)">编辑</el-button>
                  <el-button size="mini" type="danger" round @click="del(item, index)">删除</el-button>
                  <el-button
                    v-if="activePageForm.modules[activePageForm.activeModuleIndex].modules.length>1"
                    icon="el-icon-sort"
                    size="mini"
                    round
                  >拖拽排序
                  </el-button>
                </div>
              </div>
              <div>
                {{ item.content }}
              </div>
            </el-card>
          </li>
        </draggable>
      </ul>
    </template>

    <!-- 组件 -->
    <DialogText ref="dialogText" />
  </div>
</template>

<script>
import DialogText from './DialogText'
import wxaBuildConfig from '@/views/wxaBuildModule/config'
import { mapGetters } from 'vuex'
import draggable from 'vuedraggable'

export default {
  components: {
    DialogText,
    draggable
  },

  data() {
    return {
      // 配置
      moduleNameOptions: null,
      // 状态
      loading: false,
      // 数据
      classifyCode: 'DEFAULT'
    }
  },
  computed: {
    ...mapGetters(['fileBaseUrl', 'activePageForm'])
  },
  created() {
  },
  mounted() {
    this.moduleNameOptions = wxaBuildConfig[this.classifyCode].moduleName
  },
  methods: {
    /**
     * 数据组
     */
    // 获取数据

    /**
     * 按钮组
     */
    // 新增
    add() {
      this.$refs.dialogText.open({ mode: 'add' }).then((res) => {
        this.activePageForm.modules[
          this.activePageForm.activeModuleIndex
        ].modules.push(res)
        this.$forceUpdate()
      })
    },

    // 编辑
    edit(row, index) {
      this.$refs.dialogText.open({ mode: 'edit', row }).then((res) => {
        this.activePageForm.modules[
          this.activePageForm.activeModuleIndex
        ].modules[index] = res
        this.$forceUpdate()
      })
    },

    // 删除
    del(item, index) {
      this.activePageForm.modules[
        this.activePageForm.activeModuleIndex
      ].modules.splice(index, 1)
      this.$forceUpdate()
    }

    /**
     * 状态组
     */

    /**
     * 方法组
     */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/* 覆盖样式 */
::v-deep {
  .el-card__body {
    padding: 10px 20px;
  }

  .el-card__header {
    padding: 10px 20px;
  }
}

/* 无数据 */
.empty-tips {
  margin-top: 100px;
  text-align: center;
  color: #909399;
  font-size: 14px;
}

/* 货架 */
.shelf-container {
  margin-top: 10px;
  /* 商品列表 */
  .goods-list {
    // display: flex;
    font-size: 14px;
    color: #606266;

    .cell-item {
      margin-bottom: 10px;

      .cover-img {
        display: block;
        width: 60px;
        height: 60px;
        margin-right: 10px;
      }

      .goods-name {
        margin-bottom: 5px;
        color: #303030;
      }
    }
  }

  /*  类目列表 */
  .category-list {
    color: #606266;
    font-size: 14px;

    .cell-item:not(:first-child) {
      margin-top: 10px;
    }
  }
}

/* 排序 */
.el-icon-rank {
  cursor: pointer;
  font-size: 20px;
  margin-right: 10px;
}
</style>
